<template>
	<div class="app-container">
		<div class="header">
			<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />问题详情
		</div>
		<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
			<el-form-item prop="problemTitle" label="标题">
				<el-input disabled v-model="form.problemTitle" style="width: 50%" placeholder="请输入标题" />&nbsp;[限5-30字之间]
			</el-form-item>
			<el-form-item label="图片上传">
				<el-upload
					disabled
					class="avatar-uploader"
					:action="imgUrl"
					ref="upload"
					accept=".jpg,.jpeg,.png"
					v-model:file-list="imglist"
					:headers="token"
					name="files"
					:on-success="handleSuccessImg"
					:on-preview="handlePictureCardPreview"
				>
					<img v-if="form.problemImage != ''" :src="pre + form.problemImage" @click="handlePictureCardPreview(pre + form.problemImage)" class="avatar" />
					<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
				</el-upload>
			</el-form-item>
			<el-form-item prop="problemContent" label="内容">
				<el-input disabled v-model="form.problemContent" :rows="7" type="textarea" style="margin-bottom: 5px" placeholder="" />
			</el-form-item>
			<el-form-item prop="dealContent" label="处理反馈">
				<el-input disabled v-model="form.dealContent" :rows="7" type="textarea" style="margin-bottom: 5px" placeholder="" />
			</el-form-item>
		</el-form>
		<el-dialog v-model="dialogVisible">
			<img v-full :src="dialogImageUrl" alt="Preview Image" />
		</el-dialog>
		<div style="line-height: 80px; height: 80px; padding-left: 100px">
			<el-button @click="reback">返回</el-button>
		</div>
	</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
const { proxy } = getCurrentInstance()
import { getQuestion } from '@/api/question/question'
import { getToken } from '@/utils/auth'
import { getConfigKey } from '@/api/system/config'
import { useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
const tagsView = useTagsViewStore()
const route = useRoute()
const imgUrl = ref('')
const pre = ref('')
getConfigKey('img_upload').then((response) => {
	imgUrl.value = response.msg
})
const init = () => {
	getQuestion(route.query.id).then((res) => {
		for (let item in form) {
			form[item] = res.data[item] + ''
		}
	})
}
getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
	init()
})
const token = { Authorization: 'Bearer ' + getToken() }
const router = useRouter()
const baseform = ref()

const form = reactive({
	problemId: '',
	problemTitle: '',
	problemContent: '',
	problemImage: '',
	dealContent: ''
})
const validate = (rule, value, callback) => {
	if (!value) {
		callback(new Error('标题不能为空'))
	} else {
		if (value.length < 5 || value.length > 20) {
			callback(new Error('标题长度在5-30字之间'))
		} else {
			callback()
		}
	}
}
const rules = {
	problemTitle: [
		{ required: true, message: '标题不能为空', trigger: 'blur' },
		{ validator: validate, trigger: 'blur' }
	],
	problemContent: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
}
const imglist = reactive([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleSuccessImg = (response) => {
	form.problemImage = response.data[0]
}
const handlePictureCardPreview = (uploadFile) => {
	dialogImageUrl.value = uploadFile
	dialogVisible.value = true
}
const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
	border: 1px dashed #dcdfe6;
}
.avatar-uploader {
	border: 1px dashed #dcdfe6;
	height: 178px;
}
.avatar-uploader .el-upload {
	border: 1px dashed #dcdfe6;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: #dcdfe6;
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
